<%--
  Created by IntelliJ IDEA.
  User: zhou
  Date: 2017/1/5
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/common/taglibs.jspf" %>
<head>
    <meta name="decorator" content="form"/>
    <script type="text/javascript" src="<c:url value="/statics/plugins/ckeditor/ckeditor.js"/>"></script>
    <title>模板配置</title>
</head>
<style>
    .no-skin .sidebar {
        background-color: #fff;
    }
    .main-content {
        margin-left: 210px !important;
        min-height: 100%;
        padding: 0;
    }
</style>
<body  formid="billTemplateForm">
    <div class="layui-row">
        <h5 class="header smaller ">
                <span style="padding-left: 10px">
                    <i class="ace-icon fa  fa-cog"></i><span style="padding-left: 5px">模板配置</span>
                </span>
            <div class="btn-group">
                <button class="btn btn-sm  btn-primary  btn-round" id="btnSave">
                    <i class="ace-icon fa fa-pencil-square bigger-110"></i>保存
                </button>
                <%--<button class="btn btn-sm btn-danger btn-round" id="btnDel">--%>
                <%--<i class="ace-icon fa fa-trash-o bigger-110 "></i>删除--%>
                <%--</button>--%>
            </div>
        </h5>
    </div>
    <div class="layui-row" style="padding-top: 3px">
        <div class="layui-card" style="width: 200px;float: left">
            <div  class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">表单模板列表</h2>
                    <ul id="childlist" class="nav nav-pills nav-stacked">
                        <c:forEach var="obj" items="${list}" varStatus="index">
                            <li templateId="${obj.id}" templateName="${obj.name}" templateCode="${obj.code}">
                                <a href="#">${obj.name}</a>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <div  id="main-content" class="main-content" style="margin-left: 205px">
            <form id="billTemplateForm"  method="post" class="layui-form" lay-filter="component-form-group">
                <input type="hidden" name="id" id="id">
                <input type="hidden" name="name" id="name">
                <input type="hidden" name="code" id="code">
                <textarea id="content" name="content" rows="3" class="ckeditor" htmlEscape="false"></textarea>
            </form>
        </div>
    </div>
    <div id="addDialog" style="display: none;width: 500px;overflow: hidden" class="row">
        <form id="addForm" class="form-horizontal" action="<c:url value='../set/device/saveDevice'/>" method="post">
            <input type="hidden" name="id" id="id">
            <input type="hidden" name="parentId" id="parentId">
            <div class="form-group">
                <div class="space-2"></div>
                <label class="col-xs-3 control-label no-padding-right" for="parentName"> 所属分类 </label>
                <div class="col-xs-9">
                    <input type="text" id="parentName" placeholder="所属分类" class="col-xs-8" datatype="*"
                           nullmsg="请输入所属分类"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label no-padding-right" for="fieldName"> 字段名称 </label>
                <div class="col-xs-9">
                    <input type="text" id="fieldName" name="fieldName" placeholder="字段名称" class="col-xs-8" datatype="*"
                           nullmsg="字段名称"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label no-padding-right" for="displayName"> 显示名称 </label>
                <div class="col-xs-9">
                    <input type="text" id="displayName" name="displayName" placeholder="显示名称" class="col-xs-8" datatype="*"
                           nullmsg="请输入显示名称"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label no-padding-right" for="controlType">控件类型</label>
                <div class="col-xs-9">
                    <select id="controlType" name="controlType">
                        <option value="input">单行输入框-input</option>
                        <option value="button">按钮-button</option>
                        <option value="textarea">多行输入框-textarea</option>
                        <option value="select">下拉列表-select</option>
                        <option value="radio">单选框-radio</option>
                        <option value="checkbox">复选框-checkbox</option>
                        <option value="label">标签-label</option>
                        <option value="form">表单-form</option>
                        <option value="legend">文字说明-legend</option>
                        <option value="div">布局-div</option>
                        <option value="span">布局-span</option>
                        <option value="dataGrid">数据列表</option>
                        <option value="datePicker">日期选择器</option>
                        <option value="doctorSign">医生签名</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label no-padding-right" for="defaultValue"> 默认值 </label>
                <div class="col-xs-9">
                    <input type="text" id="defaultValue" name="defaultValue" placeholder="默认值" class="col-xs-8"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label no-padding-right" for="selectValue"> 下拉框值 </label>
                <div class="col-xs-9">
                    <select name="selectValue" id="selectValue">

                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label no-padding-right" for="sortId"> 排序号 </label>
                <div class="col-xs-9">
                    <input type="text" id="sortId" name="sortId" placeholder="排序号" class="col-xs-8"/>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript">
        var height = $(window).height() - $('#main-content').offset().top - $('.footer').height()-140;
        CKEDITOR.replace("content", {height: height});
        var PIMS = PIMS || {};
        PIMS.template = (function () {
            var setting = {
                saveUrl: baseUrl + '/system/billtemplate/save',
                getUrl:baseUrl + '/system/billtemplate/ajax/getReportTemplate',
            }
            var private = {
                CKupdate:function () {
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                    }
                },
                save: function () {
                    private.CKupdate(); //在提交表单前需要做以上处理
                    $.post(setting.saveUrl, $("#billTemplateForm").serialize(), function (data) {
                        if (data.ret == 0) {
                            swal("提示","保存成功","success");
                        }else {
                            swal("错误提示", data.msg,"error");
                        }
                    });
                },
                getData:function (id) {
                    $.ajax( {
                        url: setting.getUrl,
                        type: "POST",
                        data: "templateId="+id,
                        dataType:"html",
                        success: function(data){
                            CKEDITOR.instances['content'].setData(data);
                        }
                    });
                },
                bindEvent:function () {
                    $('#btnSave').on('click',function () {
                        private.save();
                    })

                    $('#childlist').find("li").on('click',function () {
                        // console.log($(this).attr("templateId"))
                        var id = $(this).attr("templateId") ||'';
                        var name = $(this).attr("templateName") ||'';
                        var code = $(this).attr("templateCode") ||'';
                        $('#childlist').find("li").removeClass("active");
                        $(this).addClass("active");
                        private.getData(id)
                        $('#id').val(id);
                        $('#name').val(name);
                        $('#code').val(code);
                    })
                }
            }
            var public={
                init:function () {
                    private.bindEvent();
                },
                save:function () {
                    private.save();
                }
            }
            return public;
        })()

        $(function () {
            PIMS.template.init();
        })
    </script>
</body>
